Сценарии

Редактировал(а) Alexandr Fokin 2023/08/27 13:22
Пример визуализации<div id="documentGraph" style="height:500px">
</div>


var width = 600;
var height = 500;

var jsonGraphData = '{"nodes":[{"id":0,"label":"Label1","x":0,"y":0,"color":{"background":"cornflowerblue"}},{"id":1,"label":"Label2","x":0,"y":150,"color":{"background":"cornflowerblue"}},{"id":2,"label":"Label3","x":0,"y":300,"color":{"background":"red"}},{"id":3,"label":"Label4","x":0,"y":450,"color":{"background":"cornflowerblue"}},{"id":4,"label":"Label5","x":-450,"y":600,"color":{"background":"red"}},{"id":5,"label":"Label6","x":0,"y":600,"color":{"background":"greenyellow"}},{"id":6,"label":"Label7","x":-450,"y":750,"color":{"background":"greenyellow"}},{"id":7,"label":"Label8","x":0,"y":750,"color":{"background":"greenyellow"}}],"edges":[{"from":"0","to":"1"},{"from":"1","to":"2"},{"from":"2","to":"3"},{"from":"3","to":"4"},{"from":"3","to":"5"},{"from":"4","to":"6"},{"from":"4","to":"7"}]}';
var graphData = JSON.parse(jsonGraphData);

window.onload = function () {

 // create an array with nodes
 var nodes = graphData.nodes;

 // create an array with edges
 var edges = graphData.edges;

 // create a network
 var container = document.getElementById('documentGraph');
 var data = {
  nodes: nodes,
  edges: edges
 };

 var options = {  
  physics: false,
  edges: {
   smooth: false
  },  
 };

 var network = new vis.Network(container, data, options);

 // Set the coordinate system of Network such that it exactly
 // matches the actual pixels of the HTML canvas on screen
 // this must correspond with the width and height set for
 // the networks container element.
 network.moveTo({
  position: { x: 0, y: 0 },
  offset: { x: -width / 2, y: -height / 2 },
  scale: 1,
 })

};  
  
  

 

Теги: